import React, { Component } from 'react'
import { PracticeApi } from '../request/api'
import "./less/Practice.less"
import Danxuan from '../components/practices/Danxuan'
import Duoxuan from '../components/practices/Duoxuan'
import Panduan from '../components/practices/Panduan'
import Wenda from '../components/practices/Wenda'
import Tiankong from '../components/practices/Tiankong'
import Biancheng from '../components/practices/Biancheng'
import Goback from '../components/Goback'

// 手指触摸点
let startX = -1;
// 手指松开点
let endX = -1;
// 当前li的索引值
let liIndex = 0;

export default class Practice extends Component {
    state = {
        ulLeft: 0,
        timuArr: []
    }
    render() {
        return (
            <div className="practice_page">
                <div className="top">
                    <i className="iconfont icon-datiqia"></i>
                    <strong>{Math.abs(liIndex)+1}</strong>
                    <span>/</span>
                    <span>{this.state.timuArr.length}</span>
                </div>
                <ul
                    className="list"
                    style={{ width: this.state.timuArr.length * 100 + '%', left: this.state.ulLeft }}
                    onTouchStart={this.handleTouchStart.bind(this)}
                    onTouchMove={this.handleTouchMove.bind(this)}
                    onTouchEnd={this.handleTouchEnd.bind(this)}
                >
                    {
                        this.state.timuArr.map(item => (
                            <li key={item.id} className="list_li">
                                <Danxuan {...item} />
                                <Duoxuan {...item} />
                                <Panduan {...item} />
                                <Wenda {...item} />
                                <Biancheng {...item} />
                                <Tiankong {...item} />
                            </li>
                        ))
                    }
                </ul>
                <Goback />
            </div>
        )
    }
    // 手指触摸到屏幕
    handleTouchStart(e) {
        startX = e.touches[0].clientX
    }
    // 手指滑动
    handleTouchMove(e) {
        endX = e.touches[0].clientX
    }
    // 手指离开屏幕
    handleTouchEnd(e) {
        let _this = this;
        // 获取滑动范围
        if (startX > -1 && endX > -1) {
            let distance = Math.abs(startX - endX);
            if (distance > 50) {
                // 两个手指位置距离相差50px，即视为要滑动
                if (startX > endX) {
                    liIndex--;
                    // index是不能超过数组长度的
                    if (Math.abs(liIndex) >= _this.state.timuArr.length - 1) {
                        liIndex = -_this.state.timuArr.length + 1;
                    }
                } else {
                    liIndex++;
                    if (liIndex >= 0) {
                        liIndex = 0;
                    }
                }
                this.setState({ ulLeft: 100 * liIndex + '%' }, () => {
                    startX = -1;
                    endX = -1;
                });
            } else {
                return;
            }
        }
    }
    componentDidMount() {
        liIndex = 0;
        this.setState({
            liIndex: 0
        })
        let {
            testNum,
            testType,
            actionCode,
            questionType
        } = this.props.location.state;
        PracticeApi({
            testNum,
            testType,
            actionCode,
            questionType
        }).then(res => {
            console.log(res);
            if (res.errCode === 0) {
                this.setState({
                    timuArr: res.data
                }, function () {
                    console.log(this.state.timuArr)
                })
            }
        })
    }
}